<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绿苑科普平台 - 一花一叶见艺彩</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-tree-fill me-2"></i>
                绿苑科普
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">科普活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">科普课程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">科普机构</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">科普专家</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a href="#" class="btn btn-outline-light me-2">登录</a>
                    <a href="#" class="btn btn-light">注册</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 大Banner -->
    <section class="hero-banner">
        <!-- 艺术装饰元素 -->
        <img src="https://cdn.pixabay.com/photo/2017/01/31/23/42/decorative-2028039_960_720.png" class="leaf-decoration leaf-1" alt="叶子装饰">
        <img src="https://cdn.pixabay.com/photo/2017/01/31/23/42/decorative-2028041_960_720.png" class="leaf-decoration leaf-2" alt="花朵装饰">
        
        <div class="container hero-content">
            <div class="row">
                <div class="col-lg-8">
                    <h1 class="hero-title">一花一叶见艺彩</h1>
                    <p class="hero-subtitle">探索自然之美，感受传统艺术魅力</p>
                    <a href="#" class="btn btn-light btn-lg me-2">探索活动</a>
                    <a href="#" class="btn btn-outline-light btn-lg">学习课程</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 地区选择 -->
    <section class="region-selector">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4 mb-3 mb-md-0">
                    <h4 class="mb-0 text-dark"><i class="bi bi-geo-alt-fill me-2"></i>当前地区: <span id="current-region">全国</span></h4>
                </div>
                <div class="col-md-8">
                    <div class="input-group">
                        <select class="form-select" id="region-select">
                            <option value="all">全国</option>
                            <option value="beijing">北京市</option>
                            <option value="shanghai">上海市</option>
                            <option value="guangzhou">广州市</option>
                            <option value="shenzhen">深圳市</option>
                            <option value="chengdu">成都市</option>
                        </select>
                        <button class="btn btn-success" id="change-region"><i class="bi bi-arrow-repeat me-1"></i>切换</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 平台特色 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5 section-title">平台特色</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card">
                        <img src="https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="card-img-top" alt="自然与艺术">
                        <div class="card-body">
                            <h5 class="card-title">自然与艺术融合</h5>
                            <p class="card-text">将自然科学与传统艺术完美结合，通过"一花一叶"展现大自然的艺术魅力。</p>
                            <a href="#" class="btn btn-outline-success">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="card-img-top" alt="课程共创">
                        <div class="card-body">
                            <h5 class="card-title">课程共创平台</h5>
                            <p class="card-text">专家与机构共同创作优质科普课程，让知识传播更加专业、系统。</p>
                            <a href="#" class="btn btn-outline-success">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" class="card-img-top" alt="社区互动">
                        <div class="card-body">
                            <h5 class="card-title">互动学习社区</h5>
                            <p class="card-text">建立学习社群，分享科普心得，参与线下活动，让学习更有趣。</p>
                            <a href="#" class="btn btn-outline-success">了解更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 热门活动 -->
    <section class="py-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-5">
                <h2 class="section-title"><i class="bi bi-calendar-event me-2"></i>热门科普活动</h2>
                <a href="#" class="btn btn-outline-success">查看全部 <i class="bi bi-arrow-right"></i></a>
            </div>
            <div class="row" id="activities-container">
                <!-- 活动卡片将通过JS动态加载 -->
            </div>
        </div>
    </section>

    <!-- 精选课程 -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-5">
                <h2 class="section-title"><i class="bi bi-journal-bookmark me-2"></i>精选科普课程</h2>
                <a href="#" class="btn btn-outline-success">查看全部 <i class="bi bi-arrow-right"></i></a>
            </div>
            <div class="row" id="courses-container">
                <!-- 课程卡片将通过JS动态加载 -->
            </div>
        </div>
    </section>

    <!-- 合作机构 -->
    <section class="py-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-5">
                <h2 class="section-title"><i class="bi bi-building me-2"></i>合作科普机构</h2>
                <a href="#" class="btn btn-outline-success">查看全部 <i class="bi bi-arrow-right"></i></a>
            </div>
            <div class="row row-cols-2 row-cols-md-4 g-4" id="orgs-container">
                <!-- 机构卡片将通过JS动态加载 -->
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h5>关于绿苑</h5>
                    <p>"一花一叶见艺彩"是绿苑科普平台的核心理念，我们致力于通过自然科学与传统艺术的结合，为大众提供优质的科普教育服务。</p>
                    <div class="mt-3">
                        <a href="#" class="me-2"><i class="bi bi-envelope-fill"></i></a>
                        <a href="#" class="me-2"><i class="bi bi-telephone-fill"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#">关于我们</a></li>
                        <li class="mb-2"><a href="#">加入我们</a></li>
                        <li class="mb-2"><a href="#">帮助中心</a></li>
                        <li class="mb-2"><a href="#">联系方式</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>平台服务</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#">科普活动</a></li>
                        <li class="mb-2"><a href="#">科普课程</a></li>
                        <li class="mb-2"><a href="#">科普资源</a></li>
                        <li class="mb-2"><a href="#">科普社区</a></li>
                    </ul>
                </div>
                <div class="col-lg-4 mb-4">
                    <h5>关注我们</h5>
                    <div class="social-icons mb-3">
                        <a href="#"><i class="bi bi-wechat"></i></a>
                        <a href="#"><i class="bi bi-weibo"></i></a>
                        <a href="#"><i class="bi bi-youtube"></i></a>
                        <a href="#"><i class="bi bi-tiktok"></i></a>
                    </div>
                    <p>订阅我们的电子报，获取最新科普活动信息</p>
                    <div class="input-group">
                        <input type="email" class="form-control" placeholder="您的邮箱">
                        <button class="btn btn-success" type="button">订阅</button>
                    </div>
                </div>
            </div>
            <hr class="my-4 bg-secondary">
            <div class="text-center">
                <p class="mb-0">© 2023 绿苑科普平台 版权所有 | 一花一叶见艺彩</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>